<template>
  <div class="box-contetnt">
    <el-form-item label="文本描述">
      <el-input v-model="childData.labelText"></el-input>
    </el-form-item>
    <el-form-item label="表单项Key">
      <el-input
        v-model.trim="childData.prop"
        placeholder="必须由英文或英文加数字组成"
        :class="{errorProp: !/^[a-zA-Z]([-_a-zA-Z0-9]{2,20})$/.test(childData.prop)}"
        maxlength="20"
      ></el-input>
      <span
        v-if="!/^[a-zA-Z]([-_a-zA-Z0-9]{2,20})$/.test(childData.prop)"
        class="errorPropTip"
      >必须由英文或英文加数字组成</span>
    </el-form-item>
    <el-form-item label="提示符">
      <el-input v-model="childData.placeholder"></el-input>
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-radio-group v-model="childData.disabled">
        <el-radio :label="false">否</el-radio>
        <el-radio :label="true">是</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否必填">
      <el-radio-group v-model="childData.isRequired">
        <el-radio :label="false">否</el-radio>
        <el-radio :label="true">是</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="布局占比">
      <el-slider
        v-model="childData.colSpan"
        :step="4"
        show-stops
        :min="4"
        :max="24"
        style="width: 80%;box-sizing: border-box;padding: 0 15px;"
      />
    </el-form-item>
  </div>
</template>
 
<script setup>
const props = defineProps({
  childData: {
    type: Object,
    default: () => {}
  }
});
</script>

<style scoped>
.cellBox {
  display: flex;
}
.left {
  justify-content: flex-start;
}
.top {
  flex-direction: column;
}
.top .label {
  padding-bottom: 5px;
}
.label {
  text-align: left;
}
</style>
